<template>
  <div>
    <el-card class="box-card">
      <el-form ref="registerForm" :model="registerForm" :rules="registerRules">
        <el-form-item prop="username">
          <el-input v-model="registerForm.username" placeholder="用户名" prefix-icon="el-icon-user" />
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            v-model="registerForm.password"
            placeholder="密码"
            type="password"
            prefix-icon="el-icon-lock"
          />
        </el-form-item>
        <el-form-item prop="confirmPass">
          <el-input
            v-model="registerForm.confirmPass"
            placeholder="确认密码"
            type="password"
            prefix-icon="el-icon-lock"
          />
        </el-form-item>
        <el-form-item>
          <el-row>
            <el-col :span="5">
              <el-button type="primary" @click="handleRegister">注册</el-button>
            </el-col>
            <el-col :span="5">
              <el-button type="primary" @click="handleReset">重置</el-button>
            </el-col>
            <el-col :span="5" :offset="5">
              <el-button type="text" @click.native="toLogin">
                <span>已有账号，去登陆</span>
              </el-button>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script>

export default {
  name: 'Register',
  data() {
    const validateUsername = (rule, value, callback) => {
      // console.log('验证用户名')

      if (!value) {
        callback(new Error('请输入用户名'))
      } else {
        callback()
      }
    }
    const validatePassword = (rule, value, callback) => {
      // console.log('验证密码')
      if (!value) {
        callback(new Error('请输入密码'))
      }
      if (value.length < 3) {
        callback(new Error('密码最低三位数'))
      } else {
        callback()
      }
    }
    const validateConfirmPass = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请确认密码'))
      }
      if (value !== this.registerForm.password) {
        callback(new Error('密码不一致'))
      } else {
        callback()
      }
    }
    return {
      registerForm: {
        username: '',
        password: '',
        confirmPass: ''
      },
      registerRules: {
        username: [{ required: true, trigger: 'blur', validator: validateUsername }],
        password: [{ required: true, trigger: 'blur', validator: validatePassword }],
        confirmPass: [{ required: true, trigger: 'blur', validator: validateConfirmPass }]
      }

    }
  },
  created() {

  },
  methods: {
    toLogin() {
      this.$router.push('/lr/login')
    },
    handleRegister() {
      this.$refs['registerForm'].validate((valid) => {
        if (valid) {
          this.$store.dispatch('user/userRegister', { username: this.registerForm.username, password: this.registerForm.password }).then(res => {
            this.$message.success('注册成功')
            this.$router.push('/lr/login')
          })
        } else {
          // this.$message('注册失败')
          // console.log('error submit!!')
          return false
        }
      })
    },
    handleReset() {
      this.$refs['registerForm'].resetFields()
    }
  }

}
</script>

<style lang="scss" scoped>
</style>
